<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" th:href="@{css/left-all.css}">
    <link rel="stylesheet" th:href="@{css/index.css}">
    <script type="text/javascript" th:src="@{js/index.js}"></script>
    <link rel="stylesheet" th:href="@{css/right.css}">
    <link rel="stylesheet" type="text/css" th:href="@{css/nailed.css}">
    <link rel="stylesheet" type="text/css" th:href="@{css/nav-menu.css}">
    <link rel="stylesheet" type="text/css" th:href="@{css/element-ui.css}">

    <script th:src="@{js/vue.js}"></script>
    <script th:src="@{js/element-ui.js}"></script>
    <script th:src="@{js/vue-router.js}"></script>
    <!--  引入axios  -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入layui.js -->
    <meta  name="viewport" content="width=device-width, initial-scale=1, maxinum-scale=1">
    <script type="text/javascript" th:src="@{/layui-v2.5.5/layui/layui.all.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/layui-v2.5.5/layui/css/layui.css}">
    <script type="text/javascript" th:src="@{/layui-v2.5.5/layui/layui.js}"></script>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
        .el-icon-headset:hover{
            cursor: pointer;
        }
    </style>



    <!--    <script>-->
    <!--    //注意：导航 依赖 element 模块，否则无法进行功能性操作-->
    <!--    layui.use('element', function(){-->
    <!--      var element = layui.element;-->

    <!--      //…-->
    <!--    });-->
    <!--    </script>-->
</head>
<body>
<template id="body1" >
    <div class="wyy-body" @play1="playMusic(123)">

        <div class="wyy-body-menu">

        </div>
        <div class="wyy-body-flag" id="wyy-body-flag">
            <div class="wyy-body-flag-mohu" id="wyy-body-flag-mohu"></div>
            <!-- 海报轮播 -->
            <div class="wyy-body-flag-img">
                <img src="http://qfq2r8jln.hn-bkt.clouddn.com/pic1.jpg"  id="pic" alt=""/>
            </div>
            <div class="btn-sliders">
                <span id="sp1" onclick="change_lunbo_pic(0)"></span>
                <span id="sp2" onclick="change_lunbo_pic(1)"></span>
                <span id="sp3" onclick="change_lunbo_pic(2)"></span>
                <span id="sp4" onclick="change_lunbo_pic(3)"></span>
                <span id="sp5" onclick="change_lunbo_pic(4)"></span>
            </div>
            <span class="left" onclick="change_lunbo_pic1(-1)"><</span>
            <span class="right" onclick="change_lunbo_pic1(1)">></span>
            <!--  图片轮播 -->
        </div>
        <div class="wyy-body-ctn">
            <div class="wyy-body-ctn-main">
                <div class="wyy-body-ctn-left">
                    <!-- 热门推荐 -->
                    <div class="wyy-body-ctn-left-up">
                        <!-- 热门推荐导航栏 -->
                        <div class="wyy-body-ctn-left-up-nav">
                            <div class="wyy-body-ctn-left-up-nav-redCircle"></div>
                            <a class="wyy-body-ctn-left-up-nav-rmtj" href="#" v-on:click="func('')">热门推荐</a>
                            <div class="wyy-body-ctn-left-up-nav-menu">
                                <a v-on:click="func('华语')" href="#">华语</a>
                                <span>|</span>
                                <a href="#" v-on:click="func('流行')">流行</a>
                                <span>|</span>
                                <a href="#" v-on:click="func('摇滚')">摇滚</a>
                                <span>|</span>
                                <a href="#" v-on:click="func('民谣')">民谣</a>
                                <span>|</span>
                                <a href="#" v-on:click="func('电子')">电子</a>
                            </div>
<!--                            <a class="wyy-body-ctn-left-up-nav-more" href="#">更多</a>-->
<!--                            &lt;!&ndash;                        type="image/svg+xml"&ndash;&gt;-->
<!--                            <embed th:src="@{svg/row.svg}" class="wyy-body-ctn-left-up-nav-jiantou" type="image/svg+xml" />-->
                            <div class="wyy-body-ctn-left-up-nav-redline"></div>
                        </div>
                        <!-- 热门推荐内容区 -->
                        <div  class="wyy-body-ctn-left-up-body">
                            <div class="wyy-body-ctn-left-up-body-item" v-for="item in items">
                                <div class="wyy-body-ctn-left-up-body-item-cover">
                                    <!--                                <a href="">{{item.picture_address}}</a>-->
                                    <img :src="item.picture_address" alt="加载图片失败！!" v-on:click="play(item)">
                                    <div class="wyy-body-ctn-left-up-body-item-cover-bottom">
                                        <div class="wyy-body-ctn-left-up-body-item-cover-bottom-earphone"></div>
                                        <a href="#" class="wyy-body-ctn-left-up-body-item-cover-bottom-number"><span
                                                v-if="item.amount_of_play > 10000">{{(item.amount_of_play-item.amount_of_play%10000)/10000}}万</span><span
                                                v-else>{{item.amount_of_play}}</span></a>
                                        <div class="wyy-body-ctn-left-up-body-item-cover-bottom-play"
                                             v-on:click="play(item)"></div>
                                    </div>
                                </div>
                                <a href="#" class="wyy-body-ctn-left-up-body-item-jianjie" v-on:click="play(item)">{{item.song_name}}
                                    | {{item.song_describing}}</a>
                            </div>
                        </div>
                    </div>


                    <!-- 新碟上架 -->
                    <div class="wyy-body-ctn-left-mid">
                        <!-- 新碟上架导航栏 -->
                        <div class="wyy-body-ctn-left-mid-nav">
                            <div class="wyy-body-ctn-left-mid-nav-redCircle"></div>
                            <a class="wyy-body-ctn-left-mid-nav-xdsj" href="#">新歌上架</a>
<!--                            <a class="wyy-body-ctn-left-mid-nav-more" href="#">更多</a>-->
<!--                            &lt;!&ndash;                        type="image/svg+xml"&ndash;&gt;-->
<!--                            <embed th:src="@{svg/row.svg}" class="wyy-body-ctn-left-mid-nav-jiantou"-->
<!--                                   type="image/svg+xml"/>-->
                            <div class="wyy-body-ctn-left-mid-nav-redline"></div>
                        </div>
                        <!-- 新碟上架内容区 -->
                        <div class="wyy-body-ctn-left-mid-cnt">
                            <!-- 右边箭头 -->
<!--                            <div class="wyy-body-ctn-left-mid-cnt-left-triangle-left">-->
<!--                                <div class="wyy-body-ctn-left-mid-cnt-left-triangle-right"></div>-->
<!--                            </div>-->

                            <!-- 碟片区 -->
                            <div class="wyy-body-ctn-left-mid-cnt-items-box">
                                <div class="wyy-body-ctn-left-mid-cnt-items">
                                    <!-- 专辑封面图片 -->
                                    <div class="wyy-body-ctn-left-mid-cnt-item" v-for="item in new_items">
                                        <img :src="item.picture_address" alt="加载图片失败！！" v-on:click="play(item)"/>
                                        <!-- 专辑名称 -->
                                        <p v-on:click="play(item)"><a>{{item.song_name}}</a></p>
                                        <!-- 专辑歌手 -->
                                        <p v-on:click="play(item)"><a class="wyy-body-ctn-left-mid-cnt-item-singer">{{item.singer_name}}</a></p>
                                    </div>
                                </div>
                            </div>

                            <!-- 左边箭头 -->
<!--                            <div class="wyy-body-ctn-left-mid-cnt-right-triangle-left">-->
<!--                                <div class="wyy-body-ctn-left-mid-cnt-right-triangle-right"></div>-->
<!--                            </div>-->
                        </div>
                    </div>

                    <!-- 榜单 -->
                    <div class="wyy-body-ctn-left-down">
                        <!-- 榜单导航栏 -->
                        <div class="wyy-body-ctn-left-down-nav">
                            <div class="wyy-body-ctn-left-down-nav-redCircle"></div>
                            <a class="wyy-body-ctn-left-down-nav-rank" href="#">榜单</a>
<!--                            <a class="wyy-body-ctn-left-down-nav-more" href="#">更多</a>-->
<!--                            &lt;!&ndash;                        type="image/svg+xml"&ndash;&gt;-->
<!--                            <embed th:src="@{svg/row.svg}" class="wyy-body-ctn-left-down-nav-jiantou"-->
<!--                                   type="image/svg+xml"/>-->
                            <div class="wyy-body-ctn-left-down-nav-redline"></div>
                        </div>

                        <!-- 榜单内容 -->
                        <div class="wyy-body-ctn-left-down-cnt">
                            <!--新歌榜-->
                            <div class="wyy-body-ctn-left-down-cnt-item">
                                <div class="wyy-body-ctn-left-down-cnt-item-top">
                                    <img class="wyy-body-ctn-left-down-cnt-item-top-image" th:src="@{img/xingebang.png}"
                                         alt="">
                                    <a class="wyy-body-ctn-left-down-cnt-item-top-text" href="#"><h3>云音乐新歌榜</h3></a>
                                    <div class="wyy-body-ctn-left-down-cnt-item-top-play"
                                         v-on:click="play(news[0])"></div>
                                    <div class="wyy-body-ctn-left-down-cnt-item-top-add"></div>
                                </div>
                                <div class="wyy-body-ctn-left-down-cnt-item-bottom">
                                    <div class="wyy-body-ctn-left-down-cnt-item-bottom-grey"><span
                                            class="wyy-body-ctn-left-down-cnt-item-bottom-red">1</span><a href="#"
                                                                                                          v-on:click="play(news[0])">{{news[0].song_name}}</a>
                                    </div>
                                    <div><span class="wyy-body-ctn-left-down-cnt-item-bottom-red">2</span><a href="#"
                                                                                                             v-on:click="play(news[1])">{{news[1].song_name}}</a>
                                    </div>
                                    <div class="wyy-body-ctn-left-down-cnt-item-bottom-grey"><span
                                            class="wyy-body-ctn-left-down-cnt-item-bottom-red">3</span><a href="#"
                                                                                                          v-on:click="play(news[2])">{{news[2].song_name}}</a>
                                    </div>
                                    <div><span>4</span><a href="#" v-on:click="play(news[3])">{{news[3].song_name}}</a>
                                    </div>
                                    <div class="wyy-body-ctn-left-down-cnt-item-bottom-grey"><span>5</span><a href="#"
                                                                                                              v-on:click="play(news[4])">{{news[4].song_name}}</a>
                                    </div>
                                    <div><span>6</span><a href="#" v-on:click="play(news[5])">{{news[5].song_name}}</a>
                                    </div>
                                    <div class="wyy-body-ctn-left-down-cnt-item-bottom-grey"><span>7</span><a href="#"
                                                                                                              v-on:click="play(news[6])">{{news[6].song_name}}</a>
                                    </div>
                                    <div><span>8</span><a href="#" v-on:click="play(news[7])">{{news[7].song_name}}</a>
                                    </div>
                                    <div class="wyy-body-ctn-left-down-cnt-item-bottom-grey"><span>9</span><a href="#"
                                                                                                              v-on:click="play(news[8])">{{news[8].song_name}}</a>
                                    </div>
                                    <div><span>10</span><a href="#" v-on:click="play(news[9])">{{news[9].song_name}}</a>
                                    </div>
                                    <div class="wyy-body-ctn-left-down-cnt-item-bottom-grey" id="lookall"><a href="#">查看全部></a>
                                    </div>
                                </div>
                            </div>

                            <!--点赞榜-->
                            <div class="wyy-body-ctn-left-down-cnt-item">
                                <div class="wyy-body-ctn-left-down-cnt-item-top">
                                    <img class="wyy-body-ctn-left-down-cnt-item-top-image"
                                         th:src="@{img/dianzanbang.png}" alt="">
                                    <a class="wyy-body-ctn-left-down-cnt-item-top-text" href="#"><h3>云音乐点赞榜</h3></a>
                                    <div class="wyy-body-ctn-left-down-cnt-item-top-play"
                                         v-on:click="play(likes[0])"></div>
                                    <div class="wyy-body-ctn-left-down-cnt-item-top-add"></div>
                                </div>
                                <div class="wyy-body-ctn-left-down-cnt-item-bottom">
                                    <div class="wyy-body-ctn-left-down-cnt-item-bottom-grey"><span
                                            class="wyy-body-ctn-left-down-cnt-item-bottom-red">1</span><a href="#"
                                                                                                          v-on:click="play(likes[0])">{{likes[0].song_name}}</a>
                                    </div>
                                    <div><span class="wyy-body-ctn-left-down-cnt-item-bottom-red">2</span><a href="#"
                                                                                                             v-on:click="play(likes[1])">{{likes[1].song_name}}</a>
                                    </div>
                                    <div class="wyy-body-ctn-left-down-cnt-item-bottom-grey"><span
                                            class="wyy-body-ctn-left-down-cnt-item-bottom-red">3</span><a href="#"
                                                                                                          v-on:click="play(likes[2])">{{likes[2].song_name}}</a>
                                    </div>
                                    <div><span>4</span><a href="#"
                                                          v-on:click="play(likes[3])">{{likes[3].song_name}}</a></div>
                                    <div class="wyy-body-ctn-left-down-cnt-item-bottom-grey"><span>5</span><a href="#"
                                                                                                              v-on:click="play(likes[4])">{{likes[4].song_name}}</a>
                                    </div>
                                    <div><span>6</span><a href="#"
                                                          v-on:click="play(likes[5])">{{likes[5].song_name}}</a></div>
                                    <div class="wyy-body-ctn-left-down-cnt-item-bottom-grey"><span>7</span><a href="#"
                                                                                                              v-on:click="play(likes[6])">{{likes[6].song_name}}</a>
                                    </div>
                                    <div><span>8</span><a href="#"
                                                          v-on:click="play(likes[7])">{{likes[7].song_name}}</a></div>
                                    <div class="wyy-body-ctn-left-down-cnt-item-bottom-grey"><span>9</span><a href="#"
                                                                                                              v-on:click="play(likes[8])">{{likes[8].song_name}}</a>
                                    </div>
                                    <div><span>10</span><a href="#"
                                                           v-on:click="play(likes[9])">{{likes[9].song_name}}</a></div>
                                    <div class="wyy-body-ctn-left-down-cnt-item-bottom-grey" id="lookall"><a href="#">查看全部></a>
                                    </div>
                                </div>
                            </div>

                            <!--收藏榜-->
                            <div class="wyy-body-ctn-left-down-cnt-item">
                                <div class="wyy-body-ctn-left-down-cnt-item-top">
                                    <img class="wyy-body-ctn-left-down-cnt-item-top-image"
                                         th:src="@{img/shoucangbang.png}" alt="">
                                    <a class="wyy-body-ctn-left-down-cnt-item-top-text" href="#"><h3>云音乐收藏榜</h3></a>
                                    <div class="wyy-body-ctn-left-down-cnt-item-top-play"
                                         v-on:click="play(collects[0])"></div>
                                    <div class="wyy-body-ctn-left-down-cnt-item-top-add"></div>
                                </div>
                                <div class="wyy-body-ctn-left-down-cnt-item-bottom">
                                    <div class="wyy-body-ctn-left-down-cnt-item-bottom-grey"><span
                                            class="wyy-body-ctn-left-down-cnt-item-bottom-red">1</span><a href="#"
                                                                                                          v-on:click="play(collects[0])">{{collects[0].song_name}}</a>
                                    </div>
                                    <div><span class="wyy-body-ctn-left-down-cnt-item-bottom-red">2</span><a href="#"
                                                                                                             v-on:click="play(collects[1])">{{collects[1].song_name}}</a>
                                    </div>
                                    <div class="wyy-body-ctn-left-down-cnt-item-bottom-grey"><span
                                            class="wyy-body-ctn-left-down-cnt-item-bottom-red">3</span><a href="#"
                                                                                                          v-on:click="play(collects[2])">{{collects[2].song_name}}</a>
                                    </div>
                                    <div><span>4</span><a href="#" v-on:click="play(collects[3])">{{collects[3].song_name}}</a>
                                    </div>
                                    <div class="wyy-body-ctn-left-down-cnt-item-bottom-grey"><span>5</span><a href="#"
                                                                                                              v-on:click="play(collects[4])">{{collects[4].song_name}}</a>
                                    </div>
                                    <div><span>6</span><a href="#" v-on:click="play(collects[5])">{{collects[5].song_name}}</a>
                                    </div>
                                    <div class="wyy-body-ctn-left-down-cnt-item-bottom-grey"><span>7</span><a href="#"
                                                                                                              v-on:click="play(collects[6])">{{collects[6].song_name}}</a>
                                    </div>
                                    <div><span>8</span><a href="#" v-on:click="play(collects[7])">{{collects[7].song_name}}</a>
                                    </div>
                                    <div class="wyy-body-ctn-left-down-cnt-item-bottom-grey"><span>9</span><a href="#"
                                                                                                              v-on:click="play(collects[8])">{{collects[8].song_name}}</a>
                                    </div>
                                    <div><span>10</span><a href="#" v-on:click="play(collects[9])">{{collects[9].song_name}}</a>
                                    </div>
                                    <div class="wyy-body-ctn-left-down-cnt-item-bottom-grey" id="lookall"><a href="#">查看全部></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div v-if="true" class="wyy-body-ctn-right">
                     登录区域
                    <div class="wyy-body-ctn-right-d1" align="center">
                        <div class="wyy-body-ctn-right-d1-up">
                            <p style="font-size:20px;color: rgb(102,102,102);">登陆网易云音乐,可以享受无限收藏的乐趣，<br>并且无限同步到手机</p>

                        </div>
                        <div class="wyy-body-ctn-right-d1-down" align="center">
                            <input type="button" @click.prevent="login" name="Login" value="点击登录后台">
                        </div>
                    </div>

                    <el-container>
                        <el-header height="100px" style="display: flex;justify-content: space-around">
                            <el-row type="flex" justify="space-around" align="middle" :gutter="50">
                                <el-col :span="3" v-show="this.$parent.loginShow">
                                    <router-link type="success" tag="el-button" to="/body/login">登录</router-link>
                                </el-col>
                                <el-col :span="3" v-show="this.$parent.registerShow">
                                    <router-link type="success" tag="el-button" to="/body/register">注册</router-link>
                                </el-col>
                                <el-col :span="3" v-show="this.$parent.userInfoShow">
                                    <router-link type="success" tag="el-button" to="/body/userInfo">个人信息</router-link>
                                </el-col>
                                <el-col :span="3" v-show="this.$parent.logOutShow">
                                    <el-button type="danger" @click.prevent="exit">退出登录</el-button>
                                </el-col>
                            </el-row>
                        </el-header>
                        <el-main>
                            <router-view></router-view>
                        </el-main>
                    </el-container>


                </div>
            </div>
        </div>
        <div class="wyy-body-bottom">

        </div>

    </div>
</template>

<!--搜索模板-->
<template id="search">

    <el-container>
        <el-header>
            <el-input v-model="input" placeholder="歌名/歌手/歌词" @keyup.enter.native="search1()"></el-input>
        </el-header>
        <el-main>
            <el-table

                    :data="songs"
                    style="width: 100%"
                    :row-class-name="tableRowClassName">
                <el-table-column
                        prop="song_name"
                        label="歌名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="singer_name"
                        label="歌手"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="song_describing"
                        label="歌曲描述"
                        width="360">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope" style="font-size: 200%">
                        <i class="el-icon-headset" @click="play(scope.$index, scope.row)"></i>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer></el-footer>
    </el-container>
</template>

<!--登录模块-->
<template id="login">
    <div>
        <el-form>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                     class="demo-ruleForm">
                <el-form-item label="用户名" prop="account">
                    <el-input type="text" v-model="ruleForm.account" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-form>
    </div>
</template>


<!--注册模块-->
<template id="register">
    <div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item required label="用户名" prop="account">
                <el-input type="text" v-model="ruleForm.account" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item required label="昵称" prop="nickname">
                <el-input type="text" v-model="ruleForm.nickname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item required label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item required label="确认密码" prop="checkPass">
                <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="积分" prop="scores">
                <el-input disabled type="number" v-model="ruleForm.scores" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-radio v-model="ruleForm.sex" label="男" check="checked">女</el-radio>
                <el-radio v-model="ruleForm.sex" label="女">男</el-radio>
            </el-form-item>
            <el-form-item required label="个性签名" prop="signature">
                <el-input type="text" v-model="ruleForm.signature" value="0" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item required label="手机号码" prop="phone">
                <el-input type="text" v-model="ruleForm.phone" value="0" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item required label="邮箱" prop="email">
                <el-input type="text" v-model="ruleForm.email" value="0" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item required>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>


<!--用户信息展示-->
<template id="userInfo">
    <div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="account">
                <el-input disabled type="text" v-model="ruleForm.account" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
                <el-input disabled type="text" v-model="ruleForm.nickname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="积分" prop="scores">
                <el-input disabled type="number" v-model="ruleForm.scores" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-radio v-model="ruleForm.sex" label="男" check="checked">女</el-radio>
                <el- v-if="ruleForm.sex == '女'" v-model="ruleForm.sex" label="女">男</el->
            </el-form-item>
            <el-form-item label="个性签名" prop="signature">
                <el-input disabled type="text" v-model="ruleForm.signature" value="0" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
                <el-input disabled type="text" v-model="ruleForm.phone" value="0" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input disabled type="text" v-model="ruleForm.email" value="0" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">修改提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<div id="wyy-main">
    <div class="wyy-nav">
        <div class="wyy-nav-logo">
            <a href="index.html">
                <img th:src="@{img/logo.png}" style="width: 90%;height: 90%;"/>
            </a>
        </div>
        <ul class="layui-nav" lay-filter="">
            <li class="layui-nav-item"><a href="#/body" style="font-size: 20px;text-decoration: none;">发现音乐</a>
                <dl class="layui-nav-child" style="position: absolute;z-index: 999;"> <!-- 二级菜单 -->
                    <dd><a href="">推荐</a></dd>
                    <dd><a href="">排行榜</a></dd>
                    <dd><a href="">歌单</a></dd>
                    <dd><a href="">电台主播</a></dd>
                    <dd><a href="">歌手</a></dd>
                    <dd><a href="">新碟上架</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="#/search" style="font-size: 20px;text-decoration: none;">搜索音乐</a></li>
            <li class="layui-nav-item"><a href="" style="font-size: 20px;text-decoration: none;">朋友</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;" style="font-size: 20px;text-decoration: none;">商城</a>

            </li>
            <li class="layui-nav-item"><a href="" style="font-size: 20px;text-decoration: none;">音乐人</a></li>
            <li class="layui-nav-item"><a href="" style="font-size: 20px;text-decoration: none;">客户端</a></li>
        </ul>

    </div>
    <!--    <router-link to="/body">登录</router-link>-->
    <router-view></router-view>
    <div >
        <el-drawer
                title="我是标题"
                :visible.sync="drawer"
                :with-header="false"
                :modal="modal"
                direction="btt"
                :append-to-body="append"
                wrapperClosable="false"
                class="player">
            <div v-for="lyric in lyrics" class="lyrics">
                <P>{{lyric}}</P>
            </div>
            <div style="position: absolute;top: 0px;right: 20px;height: 10px">
                <el-link @click="Lock" :underline="underline" style="height: 100%"  icon="el-icon-s-goods"></el-link>
            </div>
            <div class="wyy-body-player">

                <img class="wyy-body-player-img" :src="img_url" alt="">
                <div class="wyy-body-player-lastimg" v-on:click="playMusic('')"></div>
                <div class="wyy-body-player-nextimg" v-on:click="playMusic('')"></div>
                <audio :src="url" controls="controls" autoplay="autoplay"></audio>

                <div style="position: relative;left: 20px">
                    <div class="wyy-body-player-likeimg" @click="addLikeOrCollect('like')"></div>
                    <span class="wyy-body-player-likeunm">{{like}}</span>
                    <div class="wyy-body-player-collectimg" @click="addLikeOrCollect('collect')"></div>
                    <span class="wyy-body-player-collectnum">{{collect}}</span>
                    <div class="wyy-body-player-downloadimg"></div>
                </div>
                <!--        style="margin-left: 8px;"-->

            </div>
        </el-drawer>
    </div>
    <div style="position: fixed;bottom: 0px;right: 20px">
        <el-link @click.prevent="drawer = true" :underline="underline" style="height: 100%" icon="el-icon-caret-top">
            <!--            展开-->
        </el-link>
    </div>


</div>
<!--<template id="body1">-->

<!--</template>-->
<!--  全局唯一Vue代码  -->
<script>
    //登录模块
    const Login = {
        template: "#login",
        data() {

            var validatePassword = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入用户名'));
                }
                callback();
            };
            var validateAccount = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                }
                callback();
            };
            return {
                ruleForm: {
                    password: '',
                    account: ''
                },
                rules: {
                    pass: [
                        {validator: validatePassword, trigger: 'blur'}
                    ],
                    account: [
                        {validator: validateAccount, trigger: 'blur'}
                    ]

                }
            };
        },
        methods: {
            submitForm(formName) {
                let _this1 = this.$parent.$parent.$parent
                console.log(_this1)
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let _this = this
                        axios.post("/user/login", {
                            account: _this.ruleForm.account,
                            password: _this.ruleForm.password,
                        }).then(function (response) {
                            var code = response.data.code
                            if (code == 0) {
                                _this1.$parent.loginSuccess();
                                _this.$router.push('/body/userInfo');
                            } else {
                                _this.$message({
                                    message: '用户名或密码错误',
                                    type: 'warning'
                                })
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }

    //注册模块
    const Register = {
        template: "#register",
        data() {
            let accounts = '';
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            var checkAcount = (rule, value, callback) => {
                axios.get("/FindAllUserInfoAccount").then(function (response) {
                    accounts = response.data;
                });
                if (!value) {
                    return callback(new Error('用户名不能为空'));
                } else {
                    for (var i = 0; i < accounts.length; i++) {
                        if (value == accounts[i])
                            callback(new Error('用户名已存在'));
                    }
                    callback();

                }
            };
            return {
                ruleForm: {
                    password: '',
                    checkPass: '',
                    account: '',
                    nickname: '',
                    signature: '',
                    sex: '',
                    email: '',
                    phone: '',
                    scores: 0
                },
                rules: {
                    password: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    checkPass: [
                        {validator: validatePass2, trigger: 'blur'}
                    ],
                    account: [
                        {validator: checkAcount, trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post("/InsertUser", {
                            account: this.ruleForm.account,
                            nickname: this.ruleForm.nickname,
                            sex: this.ruleForm.sex,
                            phone: this.ruleForm.phone,
                            email: this.ruleForm.email,
                            scores: this.ruleForm.scores,
                            password: this.ruleForm.password,
                            signature: this.ruleForm.signature,
                        });
                        this.$router.push('/body/login')
                    } else {
                        console.log(this.ruleForm);
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs.ruleForm.resetFields();
            }
        }
    }

    //用户信息展示模块
    const UserInfo = {
        template: "#userInfo",
        data() {
            let accounts = '';

            return {
                ruleForm: {
                    password: '',
                    checkPass: '',
                    account: '',
                    nickname: '',
                    signature: '',
                    sex: '',
                    email: '',
                    phone: '',
                    scores: 0
                }
            };
        },

        created() {
            let _this = this
            axios.get("/user/query").then(function (response) {
                _this.ruleForm = response.data;
            })
        },


    }
    //搜索歌曲
    const search = {
        template: '#search',
        data() {
            return {
                input: '',
                songs: [],
            }
        },
        methods: {
            search1: function () {
                let _this = this
                axios.get("/searchByItem?item=" + this.input
                ).then(function (response) {
                    _this.songs = response.data;
                    console.log(response.data)
                }).then(function (err) {
                    console.log(err);
                })
                console.log(_this.songs + "songs")
                console.log(_this.input + "input")
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            play: function (index, row) {
                console.log(index)
                console.log(row)
                console.log("12312as")
                this.$parent.playMusic(row);
            }

        }
    }
    //主题
    const Body1 = {
        template: '#body1',
        data() {
            return {
                //热门推荐数据
                items: {
                    song_id: null,
                    song_name: null,
                    song_describing: null,
                    amount_of_play: null,
                    collected: null,
                    date: null,
                    like_number: null,
                    lyrics: null,
                    music_address: null,
                    picture_address: null,
                    singer_name: null,
                    type: null,
                    video_address: null,
                },

                //新歌上架
                new_items: {
                    song_id: null,
                    song_name: null,
                    song_describing: null,
                    amount_of_play: null,
                    collected: null,
                    date: null,
                    like_number: null,
                    lyrics: null,
                    music_address: null,
                    picture_address: null,
                    singer_name: null,
                    type: null,
                    video_address: null,
                },

                //新歌榜
                news: {
                    song_id: null,
                    song_name: null,
                    song_describing: null,
                    amount_of_play: null,
                    collected: null,
                    date: null,
                    like_number: null,
                    lyrics: null,
                    music_address: null,
                    picture_address: null,
                    singer_name: null,
                    type: null,
                    video_address: null,
                },

                //点赞榜
                likes: {
                    song_id: null,
                    song_name: null,
                    song_describing: null,
                    amount_of_play: null,
                    collected: null,
                    date: null,
                    like_number: null,
                    lyrics: null,
                    music_address: null,
                    picture_address: null,
                    singer_name: null,
                    type: null,
                    video_address: null,
                },

                //收藏榜
                collects: {
                    song_id: null,
                    song_name: null,
                    song_describing: null,
                    amount_of_play: null,
                    collected: null,
                    date: null,
                    like_number: null,
                    lyrics: null,
                    music_address: null,
                    picture_address: null,
                    singer_name: null,
                    type: null,
                    video_address: null,
                },


            }
        },
        created() {
            let _this = this;
            //热门推荐
            axios.get("/HotRecommend").then(
                function (response) {
                    _this.items = response.data;
                }
            ).catch(
                function (err) {
                    console.log(err);
                }
            )

            //新歌上架
            axios.get("/NewAlbum").then(
                function (response) {
                    _this.new_items = response.data;
                    // console.log(response.data);
                    // console.log(_this)
                }
            ).catch(
                function (err) {
                    console.log(err);
                }
            )

            //新歌榜
            axios.get("/NewSongs").then(
                function (response) {
                    _this.news = response.data;
                    // console.log(response.data);
                }
            ).catch(
                function (err) {
                    console.log(err);
                }
            );

            //点赞榜
            axios.get("/Like").then(
                function (response) {
                    _this.likes = response.data;
                    // console.log(response.data);
                }
            ).catch(
                function (err) {
                    console.log(err);
                }
            );

            //收藏榜
            axios.get("/Songcollected").then(
                function (response) {
                    _this.collects = response.data;
                    // console.log(response.data);
                }
            ).catch(
                function (err) {
                    console.log(err);
                }
            );
        },
        methods: {
            func: function (type) {
                var url = "/HotRecommend";
                if (type != '') {
                    url = "/HotRecommend/?type=" + type;
                }
                console.log(url);
                let _this = this;
                axios.get(url).then(
                    function (response) {
                        _this.items = response.data;
                    }
                ).catch(
                    function (err) {
                        console.log(err);
                    }
                )
            },
            play: function (item) {
                // this.$emit("play");
                this.$parent.playMusic(item)
            },
            exit: function () {
                axios.get("/user/logout");

                this.$parent.logOutSuccess();
                this.$router.push("/body");
            },
            login:function () {
                window.location.href="/login-1"
            }
        }
    }
    const router1 = new VueRouter({
        routes: [
            {path: '/', redirect: '/body'},
            {
                path: '/body', component: Body1,
                children: [
                    {path: 'login', component: Login},
                    {path: 'register', component: Register},
                    {path: 'userInfo', component: UserInfo},
                ]
            },
            {path: '/search', component: search}
        ]
    })
    var vm = new Vue({
        el: '#wyy-main',
        data: {
            underline: false,
            append: true,
            modal: false,
            drawer: false,
            innerDrawer: false,
            loginShow: true,
            registerShow: true,
            userInfoShow: false,
            logOutShow: false,
            watchLike: 0,
            watchCollect: 0,
            // isShow:true,
            songs: [],
            //播放器 图片地址
            img_url: "http://qdnldetn2.bkt.clouddn.com/TrueStrength.png",

            //播放器 音乐地址
            url: "http://qdnldetn2.bkt.clouddn.com/John%20Dreamer%20-%20True%20Strength%20-%20Epic%20Music.mp3",

            //播放器 点赞量
            like: "6666",

            //播放器 歌词
            lyrics: "",

            //播放器收藏量
            collect: "9999",
            timer: {},
            song_id:'',
            lock:0,

        },
        watch: {
            drawer() {
                if (this.drawer == true ) {
                        this.timer = setTimeout(() => {   //设置延迟执行
                            if(this.lock %2==0)
                                this.drawer = false;
                        }, 3000);
                }else{
                    this.lock=0
                }
            },
            watchLike() {
                if(this.watchLike%2==1){
                    this.like++;
                    axios.post("/IDLikeOrCollected",{
                        song_id:this.song_id,
                        res:'0'
                    }).then(function (response) {
                        console.log(response.data)
                    })
                }else{
                    this.like--;
                    axios.post("/IDLikeOrCollected",{
                        song_id:this.song_id,
                        res:'1'
                    }).then(function (response) {
                        console.log(response.data)
                    })
                }
            },
            watchCollect() {
                if(this.watchCollect%2==1){
                    this.collect++;
                    axios.post("/IDLikeOrCollected",{
                        song_id:this.song_id,
                        res:'2'
                    }).then(function (response) {
                        console.log(response.data)
                    })

                }else{
                    this.collect--;
                    axios.post("/IDLikeOrCollected",{
                        song_id:this.song_id,
                        res:'3'
                    }).then(function (response) {
                        console.log(response.data)
                    })

                }
            },
            lock(){
                if(this.lock%2==0){
                    this.drawer=false;
                }else{
                    this.drawer=true;
                }
            }

        },
        methods: {
            //锁住播放器
            Lock: function(){
                this.lock++;
            },

            //上一首下一首播放
            playFuc:function(){
                // axios.post("randomMusic").then(function (response) {
                //     var item = response.data.data;
                // })
            },

            //音乐播放
            playMusic: function (item) {
                // console.log(music_url);
                var _this = this;
                if(item==''){
                    axios.post("randomMusic").then(function (response) {

                        _this.item = response.data.data;
                        console.log(response.data.data)
                        console.log("--------------------")
                        console.log(_this.item);
                        _this.songs.push(_this.item);
                        _this.img_url = _this.item.picture_address;
                        _this.url = _this.item.music_address;
                        _this.lyrics = _this.item.lyrics;
                        var likenum = _this.item.like_number;
                        var collectnum = _this.item.collected;
                        _this.song_id = _this.item.song_id;
                        _this.drawer = true;
                        if (likenum > 10000) {
                            likenum = (likenum - likenum % 10000) / 10000;
                            _this.like = likenum + "万";
                        } else {
                            _this.like = likenum;
                        }

                        if (collectnum > 10000) {
                            collectnum = (collectnum - collectnum % 10000) / 10000;
                            _this.collect = collectnum + "万";
                        } else {
                            _this.collect = collectnum;
                        }

                        //歌词处理
                        _this.lyrics = _this.lyrics.split('\n');
                        console.log(_this.lyrics.length)
                    })
                }else{
                    console.log("--------------------")
                    console.log(_this.item);
                    console.log(item)
                    this.songs.push(item);
                    this.img_url = item.picture_address;
                    this.url = item.music_address;
                    this.lyrics = item.lyrics;
                    var likenum = item.like_number;
                    var collectnum = item.collected;
                    this.song_id = item.song_id;
                    this.drawer = true;
                    if (likenum > 10000) {
                        likenum = (likenum - likenum % 10000) / 10000;
                        this.like = likenum + "万";
                    } else {
                        this.like = likenum;
                    }

                    if (collectnum > 10000) {
                        collectnum = (collectnum - collectnum % 10000) / 10000;
                        this.collect = collectnum + "万";
                    } else {
                        this.collect = collectnum;
                    }

                    //歌词处理
                    this.lyrics = this.lyrics.split('\n');
                    console.log(this.lyrics.length)
                }

            },
            addLikeOrCollect: function (result) {
                console.log(result)
                if (result == 'like') {
                    this.watchLike++;
                    console.log('like')
                }
                else if (result == 'collect') {
                    this.watchCollect++;
                    console.log('collect')
                }
                console.log(this.song_id+'123')
            },

            loginSuccess: function () {
                this.loginShow = false;
                this.registerShow = false;
                this.logOutShow = true;
                this.userInfoShow = true;
            },
            //退出登录
            logOutSuccess: function () {
                this.loginShow = true;
                this.registerShow = true;
                this.logOutShow = false;
                this.userInfoShow = false;
            }
        },
        components: {
            Body1,
            UserInfo,
            Login,
            Register,
            search
        },
        router: router1

    })
</script>
</body>
</html>